<template>
  <div :class="title === 'add' || title === 'check' ?
  'creative_request_upload-body' : 'creative_request_upload-body-edit'">
    <el-form ref="form" :model="form" label-width="150px" :rules="rules">
      <el-row :gutter="10" v-if="product|| title ==='check' ">
        <el-col span="12">
          <el-form-item label="设计师 :">
            <el-select disabled size="mini" v-model="form.designer" filterable
                       placeholder="请选择" style="width: 70%">
              <el-option v-for="(item, index) in designerList" :key="index" :value="item.id" :label="item.realName">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col span="12">
          <el-form-item label="制作日期 :">
            <el-date-picker disabled size="mini" v-model="form.planTime" type="datetime" format="yyyy-MM-dd HH:mm:ss"
                            value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" align="right"
                            :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col span="12">
          <el-form-item label="实际完成时间 :">
            <el-date-picker disabled size="mini" v-model="form.actualTime" type="datetime"
                            format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="选择日期时间" align="right" :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <div v-for="(item, index) in form.creativeRequestDetailList" :key="index">
        <el-row v-if="title === 'check' || title ==='edit'" class="checkRequestHistory">
          <a @click="creativeRequestHistory(index,item)">查看历史需求记录</a>
          <!--需求历史记录-->
          <request-history :close-history="closeHistory" :requestid="requestid"
                           :offer-id="offerId" :title="title" :dialogVisible="historyDialog" :index="index"
          ></request-history>
          <el-button id="id-offer-componets-creativerequest-conmponents-request-edit-history-isRejection"
                     size="mini" :disabled="title === 'check'" @click="item.isRejection = false">同意
          </el-button>
          <el-button id="id-offer-componets-creativerequest-conmponents-request-edit-history-isRejection-two"
                     size="mini" :disabled="title === 'check'" type="primary" @click="item.isRejection = true">拒绝
          </el-button>
        </el-row>
        <el-form-item label="需求内容 :" :prop="'creativeRequestDetailList.'+index + '.content'"
                      :rules="rules['creativeRequestDetailList.content']">
          <el-row>
            <el-col :span="20">

              <!--              <el-input id="id-offer-componets-creativerequest-conmponents-request-edit-history-content-two"-->
              <!--                        :disabled="title === 'check'" type="textarea" v-model="item.content" :autosize="{ minRows: 4 }"></el-input>-->
              <!--              <avue-ueditor v-model="item.content" :disabled="title === 'check'" type="textarea"-->
              <!--                            ></avue-ueditor>-->
              <div>
                <quill-editor style="height: 180px; margin-bottom: 40px" :disabled="title === 'check'" v-model="item.content"
                              :options="editorOptions"></quill-editor>
              </div>
            </el-col>
            <el-col :span="4" v-if="item.isRejection">
              <el-input id="id-offer-componets-creativerequest-conmponents-request-edit-history-rejectionReason"
                        type="textarea" v-model="item.rejectionReason" :autosize="{ minRows: 4 }"></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="需求内容附件 :">
          <creative-upload ref="upload" mode="edit" :max="5" :data="item"></creative-upload>
        </el-form-item>
        <!-- 需求内容反显最新一条需求-->
        <!--        <el-row v-if="product" style="margin-left: 150px">-->
        <!--          <ul class="el-upload-list el-upload-list&#45;&#45;picture-card">-->
        <!--            <li-->
        <!--              v-for="(creative, i) in requestCreativeList"-->
        <!--              :key="i"-->
        <!--              class="el-upload-list__item is-ready"-->
        <!--            >-->
        <!--              <div v-if="creative.thumbnailUrl === '-1'">上传中</div>-->
        <!--              <div v-if="creative.thumbnailUrl === '-2'">上传失败</div>-->
        <!--              <img-->
        <!--                v-if="-->
        <!--                          creative.thumbnailUrl !== '-1' &&-->
        <!--                          creative.thumbnailUrl !== '-2'-->
        <!--                        "-->
        <!--                class="el-upload-list__item-thumbnail creative"-->
        <!--                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"-->
        <!--                alt=""-->
        <!--              />-->
        <!--              <span class="el-upload-list__item-actions">-->
        <!--                        <span-->
        <!--                          class="el-upload-list__item-preview"-->
        <!--                          @click="detailCreative(creative)"-->
        <!--                        >-->
        <!--                          <i class="el-icon-zoom-in"></i>-->
        <!--                        </span>-->
        <!--                      </span>-->
        <!--            </li>-->
        <!--          </ul>-->
        <!--        </el-row>-->
        <el-row :gutter="20">
          <el-col>
            <el-form-item label="素材数量 :" :prop="'creativeRequestDetailList.'+index + '.creativeNum'"
                          :rule="rules['creativeRequestDetailList.creativeNum']"
                          class="request_creativeNum">
              <el-input-number id="id-offer-componets-creativerequest-conmponents-request-edit-history-creativeNum"
                               size="mini" style="width: 150px" :min="1" :disabled="title === 'check'"
                               v-model="item.creativeNum"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-form-item label="选择参考素材 :">
            <el-tabs
              v-model="item.activeName"
            >
              <!-- 素材库-->
              <el-tab-pane :disabled="title === 'check'" label="素材库" name="creatives">
                <div class="refCreative">
                  <a @click="appendClick(index,'creatives')">添加</a>
                </div>
                <!-- 素材添加之后的素材回显到这里 -->
                <el-row :gutter="20" class="creative_list" style="margin: 0">
                  <ul class="el-upload-list el-upload-list--picture-card">
                    <li
                      v-for="(creative, i) in item.creativeList"
                      :key="i"
                      class="el-upload-list__item is-ready"
                    >
                      <div v-if="creative.thumbnailUrl === '-1'">上传中</div>
                      <div v-if="creative.thumbnailUrl === '-2'">上传失败</div>
                      <img
                        v-if="
                          creative.thumbnailUrl !== '-1' &&
                          creative.thumbnailUrl !== '-2'
                        "
                        class="el-upload-list__item-thumbnail creative"
                        :src="creative.thumbnailUrl"
                        alt=""
                        @click="detailCreative(creative,$event)" showdetail="true"
                      />
                      <span class="el-upload-list__item-actions" @click="detailCreative(creative,$event)"
                            showdetail="true">
                        <span
                          v-if="!disabled"
                          class="el-upload-list__item-delete"
                          @click="deleteCreative(index, i, 'creativeList')"
                        >
                          <i class="el-icon-delete"></i>
                        </span>
                      </span>
                    </li>
                  </ul>
                </el-row>
              </el-tab-pane>
              <!-- 原始参考素材-->
              <el-tab-pane :disabled="title === 'check'" label="原始参考素材" name="originalCreatives">
                <div class="refCreative">
                  <a @click="appendClick(index,'originalCreatives')" style="margin-right: 20px"
                  >添加</a
                  >
                  <a @click="handleOriginCreativeAdd(index)">自定义</a>
                </div>
                <el-row :gutter="20" class="creative_list" style="margin: 0">
                  <ul class="el-upload-list el-upload-list--picture-card">
                    <li
                      v-for="(creative, i) in item.originalCreativeList"
                      :key="i"
                      class="el-upload-list__item is-ready"
                    >
                      <div v-if="creative.thumbnailUrl === '-1'">上传中</div>
                      <div v-if="creative.thumbnailUrl === '-2'">上传失败</div>
                      <img
                        v-if="
                          creative.thumbnailUrl !== '-1' &&
                          creative.thumbnailUrl !== '-2'
                        "
                        class="el-upload-list__item-thumbnail creative"
                        :src="creative.thumbnailUrl"
                        alt=""
                        @click="detailCreative(creative,$event)" showdetail="true"
                      />
                      <span class="el-upload-list__item-actions" @click="detailCreative(creative,$event)"
                            showdetail="true">
                        <span
                          v-if="!disabled"
                          class="el-upload-list__item-delete"
                          @click="
                            deleteCreative(index, i, 'originalCreativeList')
                          "
                        >
                          <i class="el-icon-delete"></i>
                        </span>
                      </span>
                    </li>
                  </ul>
                </el-row>
              </el-tab-pane>
              <!-- 被拒素材-->
              <!-- -->
              <!--              <el-tab-pane :disabled="title === 'check'" label="被拒素材" name="rejectedCreatives">
                              <div class="refCreative">
                                <a @click="appendClick(index,'rejectedCreatives')">添加</a>
                              </div>
                              <el-row :gutter="20" class="creative_list" style="margin: 0">
                                <ul class="el-upload-list el-upload-list&#45;&#45;picture-card">
                                  <li
                                    v-for="(creative, i) in item.rejectedCreativeList"
                                    :key="i"
                                    class="el-upload-list__item is-ready"
                                  >
                                    <div v-if="creative.thumbnailUrl === '-1'">上传中</div>
                                    <div v-if="creative.thumbnailUrl === '-2'">上传失败</div>
                                    <img
                                      v-if="
                                        creative.thumbnailUrl !== '-1' &&
                                        creative.thumbnailUrl !== '-2'
                                      "
                                      class="el-upload-list__item-thumbnail creative"
                                      :src="creative.thumbnailUrl"
                                      alt=""
                                    />
                                    <span class="el-upload-list__item-actions">
                                      <span
                                        class="el-upload-list__item-preview"
                                        @click="detailCreative(creative)"
                                      >
                                        <i class="el-icon-zoom-in"></i>
                                      </span>
                                      &lt;!&ndash;                        <span class="el-upload-list__item-preview" @click="handleDownload(item)">&ndash;&gt;
                                      &lt;!&ndash;                           <i class="el-icon-download"></i>&ndash;&gt;
                                      &lt;!&ndash;                        </span>&ndash;&gt;
                                      <span
                                        v-if="!disabled"
                                        class="el-upload-list__item-delete"
                                        @click="
                                          deleteCreative(index, i, 'rejectedCreativeList')
                                        "
                                      >
                                        <i class="el-icon-delete"></i>
                                      </span>
                                    </span>
                                  </li>
                                </ul>
                              </el-row>
                            </el-tab-pane>-->
            </el-tabs>
          </el-form-item>
        </el-row>
      </div>

      <!--参考素材-->
      <creative-request-append :dialogVisible="appendDialogOpen" :title="creativeDialogType" :index="index"
                               @close-dialog="appendCloseDialog" @append-creatives="appendCreatives"
                               :existed-creative-ids="existedCreativeIds"
                               :creative-request-id="creativeRequestId" :offer-id="offerId" ref="childData"/>
      <!--原始参考素材自定义-->
      <div v-if="originCreativeAddDialogVisible">
        <origin-creative-add :dialogVisible="originCreativeAddDialogVisible"
                             @onClose="originCreativeAddOnClose"></origin-creative-add>
      </div>
      <!-- 素材详情-->
      <el-dialog :visible.sync="detailCreativeDialog" append-to-body top="0px;" :modal-append-to-body="false"
                 :close-on-click-modal="true"
                 :show-close="false" :before-close="closeDetailDialog" width="60%" class="creative-detail-list">
        <div style="text-align: center; width: 100%; height: 100%">
          <div slot="title" style="text-align: right">
            <el-button id="id-offer-componets-creativerequest-conmponents-request-edit-upload-closeDetailDialog"
                       class="dialog-close" size="mini" icon="el-icon-close" @click="closeDetailDialog"
                       circle></el-button>
          </div>
          <img :src="detailCreativeUrl" v-show="detailType === 'image'"/>
          <video v-show="detailType === 'video'" ref="video" :src="detailCreativeUrl"
                 autoplay="autoplay" controls="controls" class="creative_edit"></video>
        </div>
      </el-dialog>

    </el-form>
  </div>
</template>

<script>
import creativeUpload from "/src/components/beetles-upload/creative_upload";
import creativeRequestAppend from "../creativeRequestAppend";
import originCreativeAdd from "../originCreativeAdd";
import {getOfferDesigner} from "@/api/offer/creativerequest";
import requestHistory from "./request-history";
import {getRejectedList, selectAll, selectDetail, selectCreative} from "@/api/offer/creativerequest";
import Moment from "moment";

export default {
  name: "request-upload",
  components: {
    creativeUpload,
    creativeRequestAppend,
    originCreativeAdd,
    requestHistory,
  },
  props: {
    requestid: String,
    offerId: String,
    platform: Array,
    id: String,
    product: Boolean,
    title: String,
    subTitle: String,
    creativeRequestData: Object,
    saveCache: Function,
  },
  watch: {
    form: {
      deep: true,
      handler(val, old) {
        if (this.saveCache) {
          this.saveCache();
        }
      }
    },
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() <= Date.now() - 24 * 60 * 60 * 1000;
        },
      },
      form: {
        designer: '',//设计师
        planTime: '',//制作日期
        actualTime: '',//实际完成时间
        creativeRequestDetailList: [{
          content: "",
          creativeNum: 1,
          appendFiles: [],
          activeName: "creatives", //tab值
          isRejection: '',//是否拒绝
          creativeList: [], //参考素材素材库列表
          originalCreativeList: [], //参考素材原始素材列表
          rejectedCreativeList: [], //参考素材被据素材列表
          finishedCreativeList: [],//成品素材列表
        },]
      },
      historyDialog: false,//需求历史记录弹窗
      //需求内容反显最新一条需求 测试用
      requestCreativeList: [{}],
      //成品素材测试列表
      productList: [{
        date: '2021-12-14',
        isuploadList: [],
        notuploadList: [
          {
            thumbnailUrl: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
            localFilename: 'J_Yalla_BR_1080_278.jpg',
            creator: 'jessie',
            demandStatus: '',
            content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.',
          },
        ],

      }],//成品素材列表

      deletedFinishedIds: [], //删除被选中的id
      creativeRequestId: "",
      existedCreativeIds: "",
      designerList: [],//设计师列表
      rules: {
        'creativeRequestDetailList.content': [
          {required: true, message: "请填写需求内容", trigger: "blur"},
        ],
        'creativeRequestDetailList.creativeNum': [
          {required: true, message: "请输入素材数量", trigger: "blur"},
        ],
      },
      appendDialogOpen: false, //参考素材弹窗开关
      creativeDialogType: "", //参考素材title
      index: "", //参考素材的下标
      originCreativeAddDialogVisible: false, //参考素材-原始参考素材-自定义开关
      detailCreativeDialog: false, //素材详情
      detailType: {}, //素材详情弹窗-素材类型
      detailCreativeUrl: "", //素材详情弹窗-素材URL
      editorOptions: {
        placeholder: '请输入内容',
        modules: {
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
              ['blockquote', 'code-block'], // 引用  代码块
              [{header: 1}, {header: 2}], // 1、2 级标题
              [{list: 'ordered'}, {list: 'bullet'}], // 有序、无序列表
              [{script: 'sub'}, {script: 'super'}], // 上标/下标
              [{indent: '-1'}, {indent: '+1'}], // 缩进
              [{direction: 'rtl'}], // 文本方向
              // [{size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36']}], // 字体大小
              // [{header: [1, 2, 3, 4, 5, 6]}], // 标题
              // [{color: []}, {background: []}], // 字体颜色、字体背景颜色
              // // [{ font: ['songti'] }], // 字体种类
              // [{align: []}], // 对齐方式
              ['clean'], // 清除文本格式
              ['image', 'video'] // 链接、图片、视频
            ]
          }
        },
      }
    };
  },
  created() {
    getOfferDesigner(this.offerId).then((res) => {
      this.designerList = res.data.data;
    });
    if (this.subTitle == 'copy') {
      if (this.creativeRequestData.creativeRequestDetailList != null && this.creativeRequestData.creativeRequestDetailList.length > 0) {
        this.form.creativeRequestDetailList[0].content = this.creativeRequestData.creativeRequestDetailList[0].content;
      }
    } else {
      if (this.requestid != null) {
        selectAll(this.requestid).then((res) => {

          this.form.designer = res.data[0].designers
          this.form.planTime = res.data[0].planTime
          this.form.actualTime = res.data[0].actualTime
        })
        selectDetail(this.requestid).then((res) => {
          this.form.creativeRequestDetailList = res.data
        })
      }
    }
  },
  methods: {

    //参考素材
    /**
     * 获取素材
     */
    appendClick(index, type) {
      this.creativeDialogType = type;
      this.appendDialogOpen = true;
      this.index = index;
      this.existedCreativeIds = this.getExistedCreativeIds(type, index);
      this.creativeRequestId = this.id;
    },
    /*
      关闭参考素材
     */
    appendCloseDialog() {
      this.appendDialogOpen = false;
    },

    /**
     * 获取已经有的素材id
     */
    getExistedCreativeIds(title, index) {
      let ids = [];
      if (title === "creatives") {
        let dataList = this.form.creativeRequestDetailList[index].creativeList;
        for (let i in dataList) {
          ids.push(dataList[i].id);
        }
      } else if (title === "originalCreatives") {
        let dataList = this.form.creativeRequestDetailList[index].originalCreativeList;
        for (let item in dataList) {
          ids.push(dataList[item].id);
        }
      } else if (title === "rejectedCreatives") {
        let dataList = this.form.creativeRequestDetailList[index].rejectedCreativeList;
        for (let it in dataList) {
          ids.push(dataList[it].id);
        }
      }
      return ids.join(",");
    },
    /*
      添加参考素材
     */
    appendCreatives(creatives, title, index) {
      if (title === "creatives") {
        let dataList = this.form.creativeRequestDetailList[index].creativeList;
        this.form.creativeRequestDetailList[index].creativeList = dataList.concat(creatives);
      } else if (title === "originalCreatives") {
        let dataList = this.form.creativeRequestDetailList[index].originalCreativeList;
        this.form.creativeRequestDetailList[index].originalCreativeList = dataList.concat(creatives);
      } else if (title === "rejectedCreatives") {
        let dataList = this.form.creativeRequestDetailList[index].rejectedCreativeList;
        this.form.creativeRequestDetailList[index].rejectedCreativeList = dataList.concat(creatives);
      }
    },
    /*
      删除参考素材
     */
    deleteCreative(index, i, list) {
      let removeFinishedId = this.form.creativeRequestDetailList[index][list][i].id;
      if ("" !== removeFinishedId || undefined !== removeFinishedId) {
        this.deletedFinishedIds.push(removeFinishedId);
      }
      this.form.creativeRequestDetailList[index][list].splice(i, 1);
      // this.handleCreativeRequestStatusChanged(true);
    },
    /**
     * 原始参考素材自定义素材
     */
    handleOriginCreativeAdd(index) {
      this.index = index;
      this.originCreativeAddDialogVisible = true;
    },
    /**
     * 原始参考素材关闭
     */
    originCreativeAddOnClose(originCreativeList) {
      if (originCreativeList != null) {
        this.appendCreatives(
          originCreativeList,
          "originalCreatives",
          this.index
        );
      }
      this.originCreativeAddDialogVisible = false;
    },

    //素材详情
    /*
      查看素材
     */
    detailCreative(row, event) {
      if (event == null || event.target.getAttribute('showdetail') != 'true') {
        return;
      }
      let creativeDetailInfo = this.getCreativeDetailInfo(row);
      if (!creativeDetailInfo) {
        return;
      }
      this.detailCreativeDialog = true;
      this.detailType = creativeDetailInfo.detailType;
      this.detailCreativeUrl = creativeDetailInfo.detailCreativeUrl;
    },
    /**
     * 判断素材类型
     */
    getCreativeDetailInfo(row) {
      let url = row.creativeUrl;
      if (!url) {
        url = row.link;
      }
      if (!url) {
        return null;
      }
      let div = url.indexOf('?');
      if (div != -1) {
        url = url.substring(0, div);
      }
      let type;
      let urlType = url.split(".")[url.split(".").length - 1];
      let imgList = ["jpg", "jpeg", "png", "gif", "bmp"];
      let videoList = ["mp4", "mov", "avi", "mp3", "ogg", "rmvb", "mkv"];
      if (imgList.includes(urlType)) {
        type = "image";
      } else if (videoList.includes(urlType)) {
        type = "video";
      }
      return {detailType: type, detailCreativeUrl: url};
    },
    /**
     * 素材详情 关闭
     */
    closeDetailDialog() {
      this.detailCreativeDialog = false;
      this.$refs.video.pause();
    },
    /**
     * 表单验证
     */
    validateForm() {
      let flag = false;
      this.$refs.form.validate((valid) => {
        if (valid) {
          flag = true;
        } else {
          flag = false;
        }
      });
      return flag;
    },
    /**
     * 查看需求沟通历史记录
     */
    creativeRequestHistory(index, item) {
      this.historyDialog = true
      console.log(index)
      console.log(item)
    },
    /**
     * 关闭需求沟通历史记录
     */
    closeHistory() {
      this.historyDialog = false
    },
    /**
     * 添加成品素材
     * @param creatives
     * @param index
     */
    appendProductCreatives(creatives, index) {
      this.form.creativeRequestDetailList[index].uploadTime = Moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
      let dataList = this.form.creativeRequestDetailList[index].finishedCreativeList;
      this.form.creativeRequestDetailList[index].finishedCreativeList = [...dataList, ...creatives]
      // this.handleCreativeRequestStatusChanged(true);
    },
  },
};
</script>

<style scoped lang="scss">
.creative_request_upload-body {
  width: 80%;
  margin: 10px auto;
  -webkit-box-shadow: 2px 2px 19px 2px rgba(0, 0, 0, 0.18);
  box-shadow: 2px 2px 19px 2px rgba(0, 0, 0, 0.18);
  border-radius: 20px;
  padding: 15px;
}

.creative_request_upload-body-edit {
  width: 100%;
  margin: 10px auto;
  -webkit-box-shadow: 2px 2px 19px 2px rgba(0, 0, 0, 0.18);
  box-shadow: 2px 2px 19px 2px rgba(0, 0, 0, 0.18);
  border-radius: 20px;
  padding: 15px;
}

.refCreative {
  a {
    cursor: pointer;
  }
}

.request_creativeNum {
  /deep/ .el-input.is-disabled .el-input__inner {
    color: black;
  }
}

.creative_list {
  /deep/ .el-upload-list__item {
    text-align: center;
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /deep/ .el-upload-list--picture-card {
    display: flex;
    flex-wrap: wrap;
  }

  .creative {
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;
    vertical-align: middle;
  }
}

.creative-detail-list {
  .dialog-close {
    margin-bottom: 20px;
    background-color: rgba(255, 255, 255, 0);
    color: white;
  }

  /deep/ .el-dialog {
    background: rgba(255, 255, 255, 0);
    -webkit-box-shadow: none;
    box-shadow: none;
  }

  /deep/ .el-dialog__header {
    padding: 0;
  }

  img {
    width: auto;
    height: auto;
    max-width: 80%;
    max-height: 80vh;
  }

  /deep/ video {
    width: auto;
    height: auto;
    max-width: 80%;
    max-height: 80vh;
  }
}

.product_Search {
  display: flex;
  flex-direction: row;
}

.product_Body {
  width: 90%;
  margin: 1em auto auto auto;

  .product_UploadDate {
    color: #00a2ff;
    font-weight: 600;
    border-bottom: solid 2px #BDC3C7;
    padding-bottom: 3px;
    padding-left: 3em;
  }

  .product_isUpload {
    margin-top: 10px;
    display: flex;

    .product_isUpload_label {
      width: 100px;
    }

    .product_isUpload_content {
      flex: 1;
      height: 240px;
      overflow: scroll;
      display: flex;
      flex-wrap: wrap;
    }

    /deep/ .el-upload-list--picture-card .el-upload-list__item {
      overflow: inherit;
    }

    .product_border {
      width: 150px;
      height: 330px;
      margin-right: 10px;
      box-sizing: border-box;

      .productCreativeTest {
        font-size: 14px;
        margin: 5px;

        div {
          width: 100%;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          line-height: 2em;
        }
      }
    }
  }
}

.checkRequestHistory {
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-end;
  line-height: 28px;
  padding-right: 3em;

  a {
    padding-right: 2em;
    cursor: pointer;
  }
}
</style>
